<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
    #upd_btn {
        background: orange;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
    }
    #upd_btn2{
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #add_btn {
        background: #009688;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-right: 10px;
        margin-left: 412px;
    }

    #del_btn {
        background: #e4606d;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-top: 10px;
        margin-left: 20px;
    }

    /*搜索框1*/
    .bar1 {
        width: 455px;
        height: 40px;
        display: inline-block;
        margin-left: 33px;
    }

    #employeeName, #jobTitle {
        width: 285px;
        height: 40px;
        color: #0f6674;
        font-weight: bold;
        border-radius: 7px;
    }

    #sous_btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 56px;
    }

    #sous_form {
        width: 810px;
    }

    .bar1 input {
        border: 2px solid #7BA7AB;
        border-radius: 5px;
        background: #F9F0DA;
        color: #9E9C9C;
    }

    .bar1 button {
        top: 0;
        right: 0;
        background: #7BA7AB;
        border-radius: 0 5px 5px 0;
    }

    .bar1 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 16px;
        color: #F9F0DA;
    }

    #beij_div {
        height: 563px;
    }

    #tr_text2 {
        color: #95999c;
    }

    #top_div {
        margin-bottom: 20px;
    }

    #tr_text td {
        font-weight: bold;
        font-size: 18px;
    }

    #employee-tab {
        background: #f8f9fa;
    }

    #checkAll, .check {
        width: 20px;
        height: 20px;
    }

    #tr_text2 td {
        color: #818182;
    }

    label {
        font-weight: bold;
        font-size: 20px;
    }

    #updEmp-form label {
        width: 120px;
    }
    #employeeName-upd, #employeeIdCard, #employeePhoneNumer, #employeeAddress{
        width: 300px;
        display: inline-block;
        margin-top: 10px;
    }

</style>
<body>
<div id="employeeContent">
    <div class="container-fluid">
        <!--   row   一行  -->
        <div class="row">
            <div class="col-xl-12" id="top_div">
                <div class="search bar1">
                    <form id="sous_form">
                        <label>姓名：</label>
                        <input id="employeeName" name="employeeName" type="text" placeholder="按员工姓名搜索...">
                        <label>职位：</label>
                        <input id="jobTitle" name="jobTitle" type="text" placeholder="按职位搜索员工...">
                        <button id="sous_btn" type="button" @click="search"></button>
                    </form>
                </div>
                <button type="button" id="add_btn" @click="add">
                    添加
                </button>
                <button type="button" id="del_btn" @click="del">删除</button>
            </div>
        </div>
        <!--   row   一行  -->
        <div class="row">
            <div class="col-xl-12" id="beij_div">
                <table id="employee-tab" class="table table-hover">
                    <tr id="tr_text">
                        <td><input @click="allCheck" type="checkbox" id="checkAll"></td>
                        <td>员工ID</td>
                        <td>员工姓名</td>
                        <td>员工性别</td>
                        <td>员工身份证</td>
                        <td>员工手机号</td>
                        <td>员工住址</td>
                        <td>员工职位</td>
                        <td>操作</td>
                    </tr>
<!--                    v-for="e in page.list  Controller的key值-->
                    <tr v-for="employee in page.list" id="tr_text2">
                        <td><input type="checkbox" :value="employee.employeeId" class="check" @click="isCheckAll"></td>
                        <td>{{employee.employeeId}}</td>
                        <td>{{employee.employeeName}}</td>
                        <td>{{employee.employeeSextiny==1?'男':'女'}}</td>
                        <td>{{employee.employeeIdCard}}</td>
                        <td>{{employee.employeePhoneNumer}}</td>
                        <td>{{employee.employeeAddress}}</td>
                        <td><!--  员工职位-->
                            <span style="padding: 0px 10px 0px 10px" v-for="job in employee.jobList">{{job.jobTitle}}</span>
                        </td>
                        <td>
                            <!-- 按钮：用于打开模态框-->
                            <button id="upd_btn" type="button" data-toggle="modal" data-target="#myModal" class="btn btn-danger modify" @click="updEmployee(employee)">
                                修改
                            </button>
                        </td>
                    </tr>
                </table>

                    <!--无序列表 翻页-->
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="javascript:void(0);" @click="toPage(1)">首页</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0);" v-if="page.pageNow>1"
                                                 @click="toPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
                        <li class="page-item active"><a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0);" v-if="page.pageNow<page.pageTotal"
                                                 @click="toPage(page.pageNow+1)">{{page.pageNow+1}}</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0);" @click="toPage(page.pageTotal)">尾页</a>
                        </li>
                    </ul>

            </div>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">请修改员工信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form id="updEmp-form">
                        <input type="hidden" :value="employee.employeeId" name="employeeId">
                        <div class="form-group">
                            <label for="employeeName-upd">员工姓名:</label>
                            <input type="text" class="form-control" name="employeeName"
                                   id="employeeName-upd" v-model="employee.employeeName">
                        </div>
                        <label>员工性别:</label>
                        <label class="radio-inline"><input type="radio" name="employeeSextiny"
                                                           v-model="employee.employeeSextiny" value="1">男</label>
                        <label class="radio-inline"><input type="radio" name="employeeSextiny"
                                                           v-model="employee.employeeSextiny" value="2">女</label>
                        <div class="form-group">
                            <label for="employeeIdCard">身份证:</label>
                            <input type="text" class="form-control" v-model="employee.employeeIdCard"
                                   name="employeeIdCard" id="employeeIdCard">
                        </div>
                        <div class="form-group">
                            <label for="employeePhoneNumer">手机号:</label>
                            <input type="text" class="form-control" v-model="employee.employeePhoneNumer"
                                   name="employeePhoneNumer" id="employeePhoneNumer">
                        </div>
                        <div class="form-group">
                            <label for="employeeAddress">籍贯:</label>
                            <input type="text" class="form-control" v-model="employee.employeeAddress"
                                   name="employeeAddress" id="employeeAddress">
                        </div>
                        <label>员工职位：</label>
                        <div v-for="job in jobs" class="form-check form-check-inline">
                            <label class="form-check-label">
                                <input type="checkbox" name="job" class="form-check-input" :value="job.jobId"
                                       v-model="empJobs">{{job.jobTitle}}
                            </label>
                        </div>
                    </form>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button @click="updEmployee2" id="upd_btn2">保存修改</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>




<script src="../../style/jquery-3.3.1.js"></script>
<script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
<script src="../../style/vue.js"></script>
<script src="../../my1.1.js"></script>
<script>
    $(function () {
        let page = selAllEmployee(1, "", "");
        let app = new Vue({
            el: '#employeeContent',
            data: {
                page: page,
                jobs: {},
                employee: {},
                empJobs:[]
            },
            methods: {
                updEmployee: function (employee) {
                    $.ajax({
                        type: "post",
                        url: "../../JobController/selAllJob",
                        dataType: "json",
                        success: function (json) {
                            //给当前Vue的jobs赋值用于展示职位复选框
                            app.jobs = json.list;//调用vue app里的jobs: {}
                        }
                    });
                    //给复选框进行双向绑定，因为复选框存在多个选中状态
                    //所以进行双向绑定的对象是数组，数组中的值是复选框对应的值
                    let jobs=[];
                    for(let i=0;i<employee.jobList.length;i++){
                        //向数组中添加数据
                        jobs.push(employee.jobList[i].jobId);
                    }
                    this.empJobs=jobs;//把添加的数据赋值
                    $('#myModal').modal('show');
                    this.employee = employee;
                },
                updEmployee2:function () {
                    //修改员工
                    $.ajax({
                        type: "post",
                        url: "../../Employee/updEmployee",
                        dataType: "json",
                        data: $("#updEmp-form").serialize(),
                        success: function (data) {
                            //v-model的特性 双向绑定  :value单向绑定
                            //data的值会根据表单（表格）改变，表单也会根据data变化
                            location.href='employee.html';
                        }
                    })
                },
                allCheck: function () {
                    eventHub.$emit('allCheck', null);
                },
                isCheckAll: function () {
                    eventHub.$emit('isCheckAll', null);
                },
                toPage: function (pageNow) {//在点击事件里边调用
                    let employeeName = $("#employeeName").val();
                    let jobTitle = $("#jobTitle").val();
                    this.page = selAllEmployee(pageNow, employeeName, jobTitle);
                },
                search: function () {   //在点击事件里边调用
                    //点击搜索按钮，获取搜索内容，进行查询
                    let employeeName = $("#employeeName").val();
                    let jobTitle = $("#jobTitle").val();
                    this.page = selAllEmployee(1, employeeName, jobTitle);
                },
                add:function (){
                    location.href='addEmployee.html';
                },
                del: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }

                    })
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../../Employee/delEmployeeAll",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            alert(data.message);
                            location.href="employee.html";
                        }
                    })
                }

            }
        })

    })




    // 查询员工 去后台查询数据，返回查询的结果json数组。
    // 需要接受一个当前页参数。
    function selAllEmployee(pageNow, employeeName, jobTitle) {
        let page;
        $.ajax({
            type: "post",
            url: "../../Employee/selAllEmployee",
            data: {pageNow: pageNow, employeeName: employeeName, jobTitle: jobTitle},
            dataType: "json",
            async: false,//异步改同步
            success: function (json) {
                page = json;    //Controller方法返回的是page，v-for第三个参数写page.list
            }
        })     // 查询的数据（list）和分页的数据（page）
        return page;
    }




</script>
</body>
</html>